<template>
  <a-spin class="richTextTemplate" :loading="loading">
    <div class="richText" :style="'height:' + height">
      <RichTextNew
        v-model:content="copyText"
        :height="height"
        :ref="(el) => (refRichTextNew = el)"
      />
    </div>
    <div class="controlBox" :style="height ? 'height:' + height + 'px' : ''">
      <a-space>
        <a-input-search
          placeholder="根据控件名称搜索"
          v-model="searchStr"
          search-button
          @search="search"
          @press-enter="search"
        />

        <a-button
          @click="
            () => {
              searchStr = '';
              search();
            }
          "
        >
          <template #icon>
            <icon-refresh />
          </template>
        </a-button>
      </a-space>
      <a-empty v-show="!copyCurrControlData.length" />
      <section v-for="item in copyCurrControlData" :key="item.id">
        <h3>{{ item.subDetail.cnName }}</h3>
        <a-space wrap>
          <a-button
            v-for="item2 in item.subDetail.subRelDetail"
            :key="item2.id"
            @click="inputLabel(item2)"
          >
            {{ item2.ctlCnName }}
          </a-button>
        </a-space>
        <a-divider />
      </section>
    </div>
  </a-spin>
</template>

<script setup lang="ts">
import { paper } from '@/utils/printAndPdf';
import { GetBusinessModalData } from '@/apis/controltotal';
let props = withDefaults(
  defineProps<{
    funcCode?: string; //控件库代码
    height?: number;
    codes: string;
    text: string;
  }>(),
  {
    funcCode: 'SER_FUNC751D0BFF5DF442209D437EE9A581693E',
    height: 650
  }
);
let refRichTextNew = ref();

//点击选择
let inputLabel = (item: any) => {
  if (!copyCodes.value.some((str: string) => str === item?.ctlCode)) {
    copyCodes.value.push(item?.ctlCode);
  }
  const tag = `&nbsp;<span style="text-decoration: underline; color: #3598db; font-size: 12pt;">#${item.ctlCnName}#</span>&nbsp;`;
  nextTick(() => {
    refRichTextNew.value.insertContent(tag);
  });
};

let emit = defineEmits(['update:codes', 'update:text']);
let copyCodes = computed<string[]>({
  get() {
    return props.codes?.split(',').filter((item) => item) || [];
  },
  set(codeList) {
    emit('update:codes', codeList.join(','));
  }
});
let copyText = computed({
  get() {
    let html = props.text || '';
    currControlData.value.forEach(({ subDetail }) => {
      subDetail?.subRelDetail?.forEach(({ ctlCode, ctlCnName }: any) => {
        html = (html + '').replaceAll(`#${ctlCode}#`, `#${ctlCnName}#`);
      });
    });
    return html;
  },
  set(html) {
    //中文替换成控件码
    currControlData.value.forEach(({ subDetail }) => {
      subDetail?.subRelDetail?.forEach(({ ctlCode, ctlCnName }: any) => {
        html = (html + '').replaceAll(`#${ctlCnName}#`, `#${ctlCode}#`);
      });
    });
    emit('update:text', html);
  }
});

let loading = ref(true);
//控件数据
let currControlData = ref<any[]>([]);
//加载控件数据
let loadData = async () => {
  loading.value = true;
  const { funcCtlInfos } = (await GetBusinessModalData({
    funcCode: props.funcCode
  })) as any;
  currControlData.value = funcCtlInfos.children || [];
  copyCurrControlData.value = funcCtlInfos.children || [];
  loading.value = false;
};

let searchStr = ref('');
let copyCurrControlData = ref<any[]>([]);
let search = () => {
  if (searchStr.value === '') {
    copyCurrControlData.value = currControlData.value;
    return;
  }
  let list: any[] = [];
  currControlData.value.forEach((item) => {
    let sonList =
      item.subDetail?.subRelDetail?.filter(({ ctlCnName }: any) => {
        return (ctlCnName + '').includes(searchStr.value);
      }) || [];
    if (sonList.length)
      list.push({
        ...item,
        subDetail: {
          ...item.subDetail,
          subRelDetail: sonList
        }
      });
  });
  copyCurrControlData.value = list;
};
loadData();
</script>

<style scoped lang="less">
.richTextTemplate {
  display: flex;
  justify-content: space-between;
  .richText {
    width: calc(100% - 330px);
  }
  .controlBox {
    width: 400px;
    padding-left: 20px;
    overflow-x: hidden;
  }
}
</style>
